<template>
  <div class="login-comp">
    <div class="login-container">
      <div class="login-container-left">
        <div class="logo-banner">
          <img src="/logos/mark-logo-banner-rgba.png" width="200px" />
        </div>

        <el-divider></el-divider>

        <div class="slogan">
          简约 | 系统 | 创造
        </div>

        <div class="period">
          The One is No One.
        </div>
      </div>
      <div class="login-container-right">
        <div class="sign-in-row">
          <div class="sign-in-title">
            登录
          </div>
          <div class="sign-in-text">
            没有账号？一分钟注册！
          </div>
        </div>
        <div class="sign-in-input">
          { 这里是登录框 }
        </div>
        <div class="sign-in-extra">
          <div class="remember-me">
            <el-checkbox v-model="isRememberMe">记住我</el-checkbox>
          </div>
        </div>
        <div class="sign-in-btn">
          <el-button type="success">登 录</el-button>
        </div>
        <div class="sign-in-forget">
          忘记密码？
        </div>
        <div class="sign-in-apps">
          <img src="/assets/apps.png" width="200px" />
        </div>
      </div>
    </div>

    <NcCompLoginAvatar> </NcCompLoginAvatar>
  </div>
</template>

<script>
import NcCompLoginAvatar from './NcCompLoginAvatar'
export default {
  name: 'NcLoginGiteeImitate',
  components: { NcCompLoginAvatar },
  data() {
    return {
      isRememberMe: false,
    }
  },
}
</script>

<style scoped lang="stylus">

.login-comp
  width 100%
  display flex
  justify-content center
  align-items center
  .login-container
    margin-top 200px
    width 800px
    display flex
    justify-content space-between
    background-color #eee
    .login-container-left
      width 50%
      background-color #5d82a6
      padding 40px
      display flex
      flex-direction column
      align-items center

      .logo-banner
        filter: invert(100%)

      .slogan
        text-align center
        font-weight 400
        color #eee
        margin-bottom 10px

      .period
        text-align center
        color #eee
        font-style italic

    .login-container-right
      width 50%
      padding 40px
      display flex
      flex-direction column

      .sign-in-row
        display inline-flex
        justify-content space-between
        align-items flex-end
        margin-bottom 10px
        .sign-in-title
          font-size 20px
          color #000
          font-weight 500
        .sign-in-text
          color #6a8189
      .sign-in-input
        width 100%

      .sign-in-extra
        .remember-me
          el-checkbox
            color #3a5169
        margin-bottom 10px

      .sign-in-btn
        margin-bottom 10px
        .el-button
          width 100%
          background-color #fe7300
          border-style none
          font-weight 600

      .sign-in-forget
        text-align center
        color #3a5169
        margin-bottom 10px
        font-size 14px

      .sign-in-apps
        display inline-flex
        justify-content center
</style>
